<template>
  <div style="height: 100%;width: 100%">
    <router-link to="/admin" style="text-decoration: none"><el-button size="small" style="margin-left: 10px">首页</el-button></router-link>
    <el-tag
        v-for="value in tag"
        :key="value[0]"
        class="mx-1"
        :closable="value[1]===router.currentRoute.value.path?false:true"
        @close="remove(value[0])"
        effect="dark"
        @click="toPath(value[1])"
        style="margin-left: 7px;  cursor: pointer;"
    >
      <PathToChinese :text="value[0]"></PathToChinese>
      <span v-if="value[1]!==router.currentRoute.value.path?false:true">
        &bull;
      </span>
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "Tags",
  components: {}
}
</script>
<script setup>
import {useStore} from "vuex";
import {computed} from "vue";
import router from '@/router/router'
import PathToChinese from "@/components/adminHome/PathToChinese";
const store = useStore();
const tag = computed(()=>{return Array.from(store.getters.tags)})
function remove(d) {
  console.log(router.currentRoute.value.path)
  store.commit('removeTag',d)
}
function toPath(path) {
  router.push(path)
}
</script>
<style scoped>
.el-tag:hover{
  text: #725764
}
</style>